<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<title>主页面</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/base.css" />
<link rel="stylesheet" type="text/css" href="../../Content/css/user.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
	<header id="header">
		<!--头部文件从最下面load读取 ../public/head.html--> 
	</header>
	<div class="main container-fluid" id="main">
		<div class="col-md-9">
			<div class="text-right form-inline form-group">
				<select name="" class="form-control">
					<option value="">管理员</option>
					<option value="">团队成员1</option>
					<option value="">团队成员2</option>
					<option value="">团队成员3</option>
				</select>
			</div>
			<ul class="list-unstyled">
				<li class="draganddrop-container">
					<div class="item-box draganddrop-box">
						<table border="0">
							<tbody>
								<tr>
									<td width="15%">
										<a class="job-title">财务收纳</a>
										<div class="houxuanren-biaoqian">
											<span class="glyphicon glyphicon-tag glyphicon-biaoqian" style="color:#002262" data-biaoQian = "biaoQian"></span>
										</div>
									</td>
									<td width="*">
										<div class="process-section">
											<ul class="list-unstyled">
												<li><strong>进程 &nbsp;&nbsp; :</strong></li>
												<li><a>候选人  <span>15</span></a></li>
												<li><a>拒绝  <span>9</span></a></li>
												<li><a>面试  <span>11</span></a></li>
												<li><a>offer <span>2</span></a></li>
												<li><a>入职  <span>0/2</span></a></li>
											</ul>
										</div>
									</td>
									<td width="10%">
										<button type="button" class="close" data-dismiss="ui-sortable">
										  <span aria-hidden="true">&times;</span>
										</button>
									</td>
								</tr>
								<tr>
									<td></td>
									<td>
										<div class="tab-section" >									
											<!--tab 页导航 -->
										  	<ul class="nav nav-tabs" role="tablist">
												<li role="presentation" class="active" data-toggle="collapse" data-target="#collapse1"><a href="#tba1_1" aria-controls="tba1_1" role="tab" data-toggle="tab" >新推荐  <span>20</span></spanm></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse1" ><a href="#tba1_2" aria-controls="tba1_2" role="tab" data-toggle="tab">面试  <span>20</span></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse1" ><a href="#tba1_3" aria-controls="tba1_3" role="tab" data-toggle="tab">offer <span>5</span></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse1" ><a href="#tba1_4" aria-controls="tba1_4" role="tab" data-toggle="tab">入职  <span>2</span></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse1" ><a href="#tba1_4" aria-controls="tba1_5" role="tab" data-toggle="tab">过保  <span>2</span></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse1" ><a href="#tba1_6" aria-controls="tba1_6" role="tab" data-toggle="tab">其他  <span>10</span></a></li>
										  	</ul>
										</div>
									</td>
									<td>
										<a data-toggle="collapse" data-target="#collapse1" aria-expanded="" aria-controls="collapse1"><img src="../../Content/images/arrow_down.png"></a>
									</td>
								</tr>
							</tbody>
						</table>
						<div id="collapse1" class="draganddrop-body collapse tab-section" >
							  <!-- tab 页内容部分 -->
							  <div class="tab-content">
							    <div  class="tab-pane active" id="tba1_1">
							    	 <table class="table table-hover my-table" border="0" cellpadding="0" cellspacing="0">
							    	 	<tbody>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 	</tbody>
							    	 </table>
							    </div>
							    <div  class="tab-pane" id="tba1_2">
							    	<table class="table table-hover my-table" border="0" cellpadding="0" cellspacing="0">
							    	 	<tbody>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		
							    	 	</tbody>
							    	 </table>
							    </div>
							    <div class="tab-pane" id="tba1_3">3</div>
							    <div class="tab-pane" id="tba1_4">4</div>
							    <div class="tab-pane" id="tba1_5">5</div>
							    <div class="tab-pane" id="tba1_6">6</div>
							  </div>
						</div>
					</div>
				</li>
				<li class="draganddrop-container">
					<div class="item-box draganddrop-box">
						<table border="0">
							<tbody>
								<tr>
									<td width="15%">
										<a class="job-title">运营总监</a>
										<div class="houxuanren-biaoqian">
											<span class="glyphicon glyphicon-tag glyphicon-biaoqian" style="color:#002262" data-biaoQian = "biaoQian"></span>
										</div>
									</td>
									<td width="*">
										<div class="process-section">
											<ul class="list-unstyled">
												<li><strong>进程&nbsp;:</strong></li>
												<li><a>候选人  <span>15</span></a></li>
												<li><a>拒绝  <span>9</span></a></li>
												<li><a>面试  <span>11</span></a></li>
												<li><a>offer <span>2</span></a></li>
												<li><a>入职  <span>0/2</span></a></li>
											</ul>
										</div>
									</td>
									<td width="10%">
										<button type="button" class="close" data-dismiss="ui-sortable">
										  <span aria-hidden="true">&times;</span>
										</button>
									</td>
								</tr>
								<tr>
									<td><font></font></td>
									<td>
										<div class="tab-section" role="tabpane2">									
											<!--tab 页导航 -->
										  	<ul class="nav nav-tabs" role="tablist">
												<li role="presentation" class="active" data-toggle="collapse" data-target="#collapse2" ><a href="#tba2_1" aria-controls="tba2_1" role="tab" data-toggle="tab">新推荐  <span>20</span></spanm></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse2" ><a href="#tba2_2" aria-controls="tba2_2" role="tab" data-toggle="tab">面试  <span>20</span></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse2" ><a href="#tba2_3" aria-controls="tba2_3" role="tab" data-toggle="tab">offer <span>5</span></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse2" ><a href="#tba2_4" aria-controls="tba2_4" role="tab" data-toggle="tab">入职  <span>2</span></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse2" ><a href="#tba2_5" aria-controls="tba2_5" role="tab" data-toggle="tab">过保  <span>2</span></a></li>
												<li role="presentation" data-toggle="collapse" data-target="#collapse2" ><a href="#tba2_6" aria-controls="tba2_6" role="tab" data-toggle="tab">其他  <span>10</span></a></li>
										  	</ul>
										</div>
									</td>
									<td>
										<a data-toggle="collapse" data-target="#collapse2" ><img src="../../Content/images/arrow_down.png"></a>
									</td>
								</tr>
							</tbody>
						</table>
						<div id="collapse2" class="draganddrop-body collapse tab-section"  role="tabpane2">
							  <!-- tab 页内容部分 -->
							  <div class="tab-content">
							    <div role="tabpane2" class="tab-pane active" id="tba2_1">
							    	 <table class="table table-hover my-table" border="0" cellpadding="0" cellspacing="0">
							    	 	<tbody>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 	</tbody>
							    	 </table>
							    </div>
							    <div role="tabpane2" class="tab-pane" id="tba2_2">
							    	<table class="table table-hover my-table" border="0" cellpadding="0" cellspacing="0">
							    	 	<tbody>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		<tr>
							    	 			<td width="70%">高海丽-技术总监-北京华丽科技</td>
							    	 			<td width="30%">2015-02-22 15:23:00</td>
							    	 		</tr>
							    	 		
							    	 	</tbody>
							    	 </table>
							    </div>
							    <div role="tabpane2" class="tab-pane" id="tba2_3">3</div>
							    <div role="tabpane2" class="tab-pane" id="tba2_4">4</div>
							    <div role="tabpane2" class="tab-pane" id="tba2_5">5</div>
							    <div role="tabpane2" class="tab-pane" id="tba2_6">6</div>
							  </div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="col-md-3">
			<div id="my_schedule">
				<!--菜单文件从最下面load读取 ../public/mySchedule.html-->
			</div>
		</div>	
	</div>

<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
<script src="../../Scripts/jquery.searchbox.animate.js"></script>
<script src="../../Scripts/bootbox.min.js"></script>
<script src="../../Scripts/jquery-ui-1.10.3.full.min.js"></script>

<script src="../../Scripts/base.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function(){
		//读取共用的头部和菜单文件
		$("#header").load("../public/head.html nav",function(){
			$('[data-toggle="tooltip"]').tooltip();  //头部鼠标划过提示
			$('.search-box').searchbox({speed:500}); //头部搜索
		});
		//读取共用的今日日程文件
		$("#my_schedule").load("../public/mySchedule.html .my-schedule",function(){
			
			//页面勾选框事件处理
			$('.schedule-box').find('input[type="checkbox"]').on('click',function(){
				
				if(this.checked){
					//勾选
					$(this).siblings().css({'text-decoration':'line-through'});
				}else{
					//非勾选
					$(this).siblings().css({'text-decoration':'none'});
				}
			})
			
			//今日日程弹窗处理
			$('.schedule-box').find('a.schedule-title').on('click',function(){
				/*--
		        	作者：yaowei
		        	时间：2015-03-11
		        	描述：创建弹窗内容
		        	
		        --*/
				var form = $('<form class="form-inline"><label>今日日程</label></form>');
				var _schedule='<div class="schedule-modal">\
									<div class="title-row">\
										<input type="checkbox"><span class="title">日程标题</span>\
										<span class="schedul-time">09:55-10:55</span>\
									</div>\
									<div class="schedul-text">日程备注</div>\
								</div>'
				form.append(_schedule).find('input[type="checkbox"]').on('click',function(){
					//勾选框事件处理
					if(this.checked){
						$(this).parent('.title-row').css({'text-decoration':'line-through'});
					}else{
						$(this).parent('.title-row').css({'text-decoration':'none'});
					}
				});
				var div = bootbox.dialog({
					message: form
				});
			})
		});
		
		//候选人标签颜色切换
		$("[data-biaoQian]").click(function(e){
			e.stopPropagation()
			$(this).biaoQian(function(a){
//				发送服务器端处理   变量 a为当时点击的标签切换后的标签的颜色值，请将颜色值保存服务器
				alert("选中的颜色值为："+a+"请保存入服务器");
			});
		});
		
		//展开事件处理JS 
		$('.collapse').on('show.bs.collapse', function () {
			//展开后处理箭头图标
			var _flag=$(this).attr('id')
			var img_src=$('[data-target="#'+_flag+'"]').find('img').attr('src').split('/');
			img_src[img_src.length-1]='arrow_up.png';
			img_src=img_src.join('/');
			$('[data-target="#'+_flag+'"]').find('img').attr('src',img_src);
			
			//展开后处理选项卡事件
			$('li[data-target="#'+_flag+'"]').attr('data-toggle','in')
			
			
		}).on('hide.bs.collapse', function () {
			//隐藏后处理箭头图标
		  	var _flag=$(this).attr('id')
			var img_src=$('[data-target="#'+_flag+'"]').find('img').attr('src').split('/');
			img_src[img_src.length-1]='arrow_down.png';
			img_src=img_src.join('/');
			$('[data-target="#'+_flag+'"]').find('img').attr('src',img_src);
			
			//展开后处理选项卡事件
			$('li[data-target="#'+_flag+'"]').attr('data-toggle','collapse')
		})
		
		//拖拽插件调用方式
		$('.draganddrop-container').sortable({
			connectWith: '.draganddrop-container',
			items:'> .draganddrop-box',
			opacity:0.8,
			revert:true,
			forceHelperSize:true,
			placeholder: 'draganddrop-placeholder',
			forcePlaceholderSize:true,
			tolerance:'pointer'
		});
		
		//关闭按钮
		$("[data-dismiss=ui-sortable]").click(function(){
			var closeme =$(this).parents(".ui-sortable");
			closeme.fadeOut(function(){
				closeme.remove();
				alert("程序可以在此处理关闭事件");
			});
		});
		
	})
</script>
</body>
</html>
